<template>
  <nav :style="header1Obj.style">
    <div>
      <img :src="header1Obj.logoImg" alt="logo">
      <ul>
        <router-link v-for="(item,index) in navList" :key="index" tag="li" :to="{path:theRouter[index]}">{{ item }}</router-link>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  props: {
    header1Obj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      theRouter: ['/vMain', '/brand', '/vMain/allBrand', '/vMain/join', '/vMain/strength', '/vMain/news', '/vMain/about'],
      navList: ['首页', '十大品牌', '品牌大全', '招商加盟', '榜上力量', '新闻资讯', '关于我们']
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>

nav{
  width: 100%;
  min-width: 1200px;
  max-width: 1920px;
  margin: 0 auto;
  height: 90px;
  /* background-color: #323333; */
  margin-bottom: 98px;
  >div{
    width: 1200px;
    height: 90px;
    margin:0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    >ul{
      width: 680px;
      height: 90px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      /* color: #fff; */
      >li{
        cursor: pointer;
        position: relative;
      }
      >.router-link-exact-active{
        color: #417AEF;
        &::after{
          display:block;
          content:"";
          width: 100%;
          height:2px;
          background-color: #417AEF;
          position: absolute;
          bottom: -17px;
          left: 0;
          z-index: 99;
        }
      }
    }
    >img{
      display: block;
      height: 66px;
    }
  }
}
</style>
